<template>
  <div>
    <div class="money">
      <div>
        <p class="p1">0.00</p>
        <p class="p2">余额</p>
      </div>
      <div>
        <p class="p1">0</p>
        <p class="p2">余额</p>
      </div>
      <div>
        <p class="p1">0</p>
        <p class="p2">余额</p>
      </div>
      <div>
        <p class="p1">0</p>
        <p class="p2">余额</p>
      </div>
      <div>
        <p class="p1"><van-icon name="gold-coin" /></p>
        <p class="p2">余额</p>
      </div>
    </div>
    <div class="img-top1">
      <img src="../../../public/img/66.jpg" />
    </div>
    <div class="dingdan">
      <div class="top">
        <span>我的订单</span>
        <span>查看全部订单&gt;</span>
      </div>
      <div class="center">
        <div>
          <p ><van-icon name="pending-payment" /></p>
          <p class="p2">待付款</p>
        </div>
        <div>
          <p><van-icon name="send-gift-o" /></p>
          <p class="p2">待发货</p>
        </div>
        <div>
          <p class="iconfont icon-daishouhuo"></p>
          <p class="p2">待收货</p>
        </div>
        <div>
          <p ><van-icon name="logistics" /></p>
          <p class="p2">评价</p>
        </div>
        <div>
          <p ><van-icon name="cash-back-record" /></p>
          <p class="p2">退款/售后</p>
        </div>
      </div>
    </div>
    <div class="center1">
      <router-link to="/shop" >
       <div class="gou">
        <p ><van-icon name="shopping-cart-o" /></p>
        <p class="p2">购物车</p>
      </div>
      </router-link>
     
      <div>
        <p ><van-icon name="location-o" /></p>
        <p class="p2" @click="shou()">收货地址</p>
      </div>
      <div>
        <p ><van-icon name="chat-o" /></p>
        <p class="p2">客服聊天</p>
      </div>
      <div>
        <p ><van-icon name="manager-o" /></p>
        <p class="p2">个人信息</p>
      </div>
      <div>
        <p ><van-icon name="friends-o" /></p>
        <p class="p2">账号设置</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
methods:{
  shou(){
    this.$router.push("/dizhi")
  }
}



};
</script>

<style scoped>
.money {
  width: 3.15rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.25rem;
  background-color: rgb(252, 250, 230);
  border-radius: 0.1rem;
  margin: 0.2rem auto 0.1rem;
  display: flex;
  justify-content: space-around;
}
.money div {
  display: flex;
  flex-direction: column;
}
.p1 {
  font-size: 0.16rem;
  font-weight: 600;
}
.p2 {
  color: rgb(71, 70, 70);
}
.img-top1 {
  width: 3.2rem;
  height: 0.9rem;
  margin: 0 auto;
}
.img-top1 img {
  width: 100%;
  height: 0.9rem;
}
.dingdan {
  width: 315px;
  height: 115px;
  border-radius: 0.1rem;
  margin: 0 auto;
  margin-bottom: 0.15rem;
}
.center {
  text-align: center;
  width: 3.15rem;
  height: 0.8rem;
  line-height: 0.3rem;
  display: flex;
  align-items: center;
  background-color: rgb(252, 250, 230);
  border-radius: 0.1rem;
  margin: 0 auto 0.1rem;
  justify-content: space-around;
  font-weight: 600;
}
.top {
  line-height: 0.4rem;
  height: 0.4rem;
  display: flex;
  justify-content: space-between;
}
.top :nth-child(1) {
  font-weight: 600;
  font-size: 0.18rem;
}
.top :nth-child(2) {
  color: rgb(102, 101, 101);
}
.center1 {
  flex-wrap: wrap;
  height: 1.6rem;
  line-height: 0.3rem;
  text-align: center;
  display: flex;
  align-items: center;
  width: 3.15rem;
  background-color: rgb(252, 250, 230);
  border-radius: 0.1rem;
  margin: 0 auto 0.1rem;
  justify-content: space-around;
}
.center1 div {
  width: 0.7rem;
  height: 0.7rem;
}
.gou{
   width: 0.7rem;
  height: 0.7rem;
  line-height:  0.27rem;
}
</style>